cTrader Web and Desktop, Redesign and Design System (v2.0 – 2x, 2016 – 2017)
The Product
cTrader is Spotware’s flagship trading platform solution and a brand trusted by millions of traders worldwide in the Forex and CFD trading space. cTrader is a multi-asset platform with a vast range of markets. It offers manual, copy and automated trading covering all type of traders’ needs.
cTrader features advanced analytical tools, a wide range of order types and responsive charts with more than 70 indicators, and comes in the desktop, web, Android and iOS mobile versions that support the entire trader lifecycle.
Because cTrader Suite comes as a complete solution for brokers, with cloud hosting, global infrastructure, and ongoing technical support, it is highly demanded by startup brokers for whom it is much easier and cost-effective to employ a ready-made solution out of the box.
Problem The Project Was Intended to Solve
Designs of cTrader and its related products (cAlgo, cMirror) were made by different designers over several years. In perspective to merge all products into one application in v3.0, there was a need to revise color themes and UI components design in v2.0. It was important to make colors and components more versatile, so they could fit all the products that will be merged in v3.0, and to create a design system to keep existing and future products’ design consistent.
My Role
UI/UX designer. Revised existing UI components and color themes, removed inconsistencies, created design system and versatile color table to fit all the products. All the future products and features were built using this system.
Team
CEO, Product Owners, JS and .NET Developers, QAs, UI/UX Designer (me)
________________
Process Timeline
________________
Before
________________
After
Light theme is adjusted specifically for daytime operation, the dark theme will suit darker environments.
Redesigned Market Watch and Trade Watch sections, and components such as lists, market status indicators, and tabs to visually declutter the interface.
________________
Results
cTrader 2.0 saw a complete overhaul of the user interface to modernize the entire application. Because now there was the design system as a single source of truth, the cTrader was ready to transition into its 3.0 version where all the aplications were successfully merged (see also my project cTrader Web and Desktop — All-in-One, Symbol Centric (v3.0 – 3.x 2018 – 2019). Also, the implementation of the color table has made the process of recoloring/rebranding the platform for whitelabel purposes much easier.
